<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item>商品库存</el-breadcrumb-item>
			</el-breadcrumb>
			<!--start 右侧帮助组件    可选！！-->
			<help-components>
				<span slot="headtext">库存商品列表</span>
				<p slot="headDescText">库存商品列表</p>
				<div slot="helpContentWrap">
				</div>
			</help-components>
			<!--end 右侧帮助组件-->
		</div>
		<!--end  面包屑-->
		<!--start content-->
		<div class="content" ref="content">
			<!-- start 高级搜索 -->
			<div>
				<transition name="fade">
					<div class="modal_backdrop" v-show="vue_advSearch_enable"></div>
				</transition>
				<transition name="fade">
					<div class="specific_search" v-show="vue_advSearch_enable">
						<div class="search_title">
							<p>高级搜索</p>
						</div>
						<!--start 高级搜索的具体项目   可选！！-->
						<div class="form kucunform">
							<el-form ref="form" :model="vue_form" label-width="80px">
								<div style="float: left;">
								  <el-form-item label="关键词">
								    <el-input v-model="vue_form.keyname" placeholder="请输入商品名称/编码/关键字/条形码"></el-input>
								  </el-form-item>
								  <el-form-item label="商品品牌">
								    <el-select v-model="vue_form.brandCode" placeholder="全部品牌">
								    	<el-option label="全部品牌" value="">
											<span style="font-size:12px ;">全部品牌</span>
										</el-option>
									    <el-option v-for="item in vue_form.brand"
											:key="item.brandCode"
											:label="item.brandName"
											:value="item.brandCode">
										</el-option>
									</el-select>
								  </el-form-item>

								  <!--<el-form-item label="商品标签">
								  	<el-checkbox :indeterminate="vue_isIndeterminate2" v-model="vue_checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
								    <el-checkbox-group v-model="vue_checkedCities2" @change="handleCheckedCitiesChange2">
									    <el-checkbox v-for="city in vue_cities2" :label="city" :key="city">{{city}}</el-checkbox>
									  </el-checkbox-group>
								  </el-form-item>
								  <el-form-item label="库存状态">
								  	<el-checkbox :indeterminate="vue_isIndeterminate3" v-model="vue_checkAll3" @change="handleCheckAllChange3">全选</el-checkbox>
								    <el-checkbox-group v-model="vue_checkedCities3" @change="handleCheckedCitiesChange3">
									    <el-checkbox v-for="city in vue_cities3" :label="city" :key="city">{{city}}</el-checkbox>
									  </el-checkbox-group>
								  </el-form-item>-->

								  <!--<el-form-item label="商品状态">
								    <el-radio-group v-model="vue_form.resource">
								      <el-radio label="">全部</el-radio>
								      <el-radio label="0">上架</el-radio>
								      <el-radio label="1">下架</el-radio>
								    </el-radio-group>
								  </el-form-item>-->
								</div>
							  <div style="float: left;margin-left: 50px;">
								  <el-form-item label="商品分类">
								  	 <el-select v-model="vue_form.categoryCode" clearable placeholder="" >
								  	 	<el-option label="全部分类" value="">
											<span style="font-size:12px ;">全部分类</span>
										</el-option>
										<el-option v-for="item in vue_form.categorys"
											:key="item.categoryCode"
											:label="item.categoryName"
											:value="item.categoryCode">
										</el-option>
									</el-select>
								  </el-form-item>
							  </div>
							</el-form>
						</div>
						<!--end 高级搜索的具体项目 -->
						<div class="search_btn" style="clear: both;">
							<el-button @click="advSearch_ok" type="primary">确定</el-button>
							<el-button @click="advSearch_cancel">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<div class="search_handle " v-if="vue_advSearch_showDialog">
				搜索结果
				<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="advSearch_disable"><em class="iconfont">&#xe66b;</em>清除搜索</a>
				<a @click="advSearch_enable"><em class="iconfont">&#xe62d;</em>继续搜索</a>
			</div>
			<!-- end 高级搜索  -->
			<!-- start 修改 -->
			<div>
				<transition name="fade">
					<div class="modal_backdrop" v-show="vue_update_enable"></div>
				</transition>
				<transition name="fade">
					<div class="specific_search" v-show="vue_update_enable">
						<div class="search_title">
							<p>修改库存信息</p>
						</div>
						<!--start 修改库存信息   可选！！-->
						<div class="form">
							<div class="form-left">
								<el-form style="position: relative" ref="vue_updateForm" :model="vue_updateForm" label-width="80px">
								  <el-form-item label="库存上限">
								    <el-input v-model="vue_updateForm.goodsUpperLimit" placeholder="" @input="upper_btn"></el-input>
								  </el-form-item>
								  <el-form-item label="库存下限">
								    <el-input v-model="vue_updateForm.goodsLowerLimit"  placeholder="" @input="lower_btn"></el-input>
								  </el-form-item>
                  <i class="redStyle" v-show="tipsShow">库存下限需小于库存上限</i>
								</el-form>
							</div>
						</div>
						<!--end 修改具体项目 -->
						<div class="search_btn">
							<el-button @click="update_ok" type="primary">确定</el-button>
							<el-button @click="update_cancel">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!-- end 修改  -->
			<!-- start 批量操作 -->
			<div class="batch_handle" v-if="vue_row_selectCount>0 && vue_advSearch_showDialog==false" >
				<em class="iconfont" @click="row_unselectAll" style="margin: 2px 20px;position: relative;top: 2px;cursor: pointer;">&#xe630;</em>
				已选<span>{{vue_row_selectCount}}</span>项<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="batchTransfer"><em class="iconfont">&#xe767;</em>&nbsp;批量流转</a>
				<a @click="batchDelete"><em class="iconfont">&#xe616;</em>&nbsp;批量删除</a>
				<!-- add more row action button -->
			</div>
			<!--end 批量操作-->
			<!--start 普通搜索-->
			<div class="public_th clearfix" v-if="vue_row_selectCount==0">
				<!--<div class="slideBtn fl" >
					<el-select v-model="stockGoodsQb.warehouseCode" @change="generalSearch_ok" placeholder="全部仓库">
						<el-option label="全部仓库" value="">
							<span style="font-size:12px ;">全部仓库</span>
						</el-option>
						<el-option v-for="item in stockGoodsQb.options"
							:key="item.warehouseCode"
							:label="item.warehouseName"
							:value="item.warehouseCode">
						</el-option>
					</el-select>
				</div>-->
				<!--<div class="slideBtn fl">
					<el-select v-model="stockGoodsQb.ddlistKey" @change="generalSearch_ok" placeholder="全部类型">
						<el-option label="全部类型" value="">
							<span style="font-size:12px ;">全部类型</span>
						</el-option>
						<el-option v-for="item in stockGoodsQb.options"
							:key="item.ddlistKey"
							:label="item.checkoutType"
							:value="item.ddlistKey">
						</el-option>
					</el-select>
				</div>-->
				<div class="public_th_left fl">
					<div class="fl">
						<div class="search_input">
							<input @keydown.enter="generalSearch_ok" type="text" v-model="stockGoodsQb.fullTextFilterStr" placeholder="请输入商品名称/编码/规格/关键字/条形码" /><i @click="generalSearch_ok"></i>
						</div>
					</div>
					<span class="fl search_openBtn" @click="advSearch_showDialog">高级搜索</span>
				</div>
				<div class="public_th_right fr">
					<!--<a>导入</a>
					<a>导出</a>-->
					<!--<router-link to="/goods/stockGoodsAdd" style="background: #13c19f;color: #fff;border: 0;">库存盘点</router-link>-->
				</div>
			</div>
			<!--end 普通搜索-->
			<!--start 表格-->
			<div class="table contentBodyCon content_table_list" :class="{beforeNone:stockGoodsSet.list.length!='0'}">
				<el-table @sort-change="vFun_sort"  ref="stockGoodsRows" :data="stockGoodsSet.list" style="width: 100%;  z-index: 10;"  :max-height="vue_tableHeight">
 					<el-table-column prop="goodsCode" label="商品编号" min-width="140"></el-table-column>
 					<el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip min-width="150"></el-table-column>
					<el-table-column prop="goodsSkuValue" label="规格" min-width="190"></el-table-column>
					<el-table-column prop="goodsNumUnit" label="单位" min-width="100"></el-table-column>
					<el-table-column prop="warehouseName" label="所属仓库" min-width="140"></el-table-column>
					<el-table-column prop="goodsUpperLimit" label="库存上限" min-width="100"></el-table-column>
					<el-table-column prop="goodsLowerLimit" label="库存下限" min-width="90"></el-table-column>
					<el-table-column prop="goodsReserveNum" label="预购量" sortable="custom" min-width="100"></el-table-column>
					<el-table-column prop="goodsNum" label="库存量" sortable="custom" min-width="100">
             <template  scope="scope">
                 <p :class="{red:regShow}">{{scope.row.goodsNum}}</p>
             </template>
          </el-table-column>
					<!--<el-table-column prop="goodsLockNum " label="锁定数量"></el-table-column>-->
					<!-- add more column header -->

					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="popover_p" style="cursor: pointer;" @click="row_Update(scope.row)">
									<em class="iconfont">&#xe617;</em>修改
								</p>
								<p class="popover_p" style="cursor: pointer;" @click="row_goUpdate(scope.row)">
									<em class="iconfont">&#xe759;</em>明细
								</p>
								<div slot="reference" style="text-align: center;">
									<em class="iconfont tab_hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--end 表格-->
			<div class="block fr">
				<el-pagination
					@size-change="page_onPageSizeChange"
					@current-change="page_onCurPageChange"
					:current-page="parseInt(stockGoodsSet.pageTools.pageNo)"
					:page-sizes="stockGoodsSet.pageTools.pageSizeOptions"
					:page-size="parseInt(stockGoodsSet.pageTools.pageSize)"
					:total="parseInt(stockGoodsSet.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	/*
	 1.引入的组件、文件等，优先写在顶部。
	 2.组件的选项编写顺序按照先string再obj再function，详细如下：
	 	1):el=>name=>template
	 	2):components=>watch=>filters=>computed=>props=>directives=>propsData=>parent=>mixins=>delimiters=>functional=>methods
	 	3):render=>data=>extends=>生命周期钩子
	 * */
	import helpComponents from '../../../components/help/help';    //引入右侧帮助组件 可选！！
	const cityOptions2 = ['新品上架', '热卖推荐', '清仓优惠'];
	const cityOptions3 = ['高于库存上限值', '低于库存下限值', '库存<=0商品'];
	export default {
		components:{helpComponents},
		data() {
			return {
				/* start 全局变量定义 */
				tipsShow:false,    //显示提示
				regShow:false,         //库存量小于库存下线时，显示红色
				vue_advSearch_showDialog:false,  //是否启用高级搜索功能
				vue_advSearch_enable:false,  //是否显示高级搜索窗口
				vue_update_enable:false,	//是否显示修改窗口
				vue_tableHeight:500,  //表格高度
			 vue_row_selectCount:0,  //选择的row数
       vue_row_goodsCodeStr:"",  //选中的row
       vue_goodsCod:'',			//存贮商品编码

//				vue_checkAll: false,
//		        vue_checkedCities: [],
//		        vue_cities: cityOptions,
//		        vue_isIndeterminate: false,

        vue_checkAll2: false,
        vue_checkedCities2: [],
        vue_cities2: cityOptions2,
        vue_isIndeterminate2: false,

				vue_checkAll3: false,
        vue_checkedCities3: [],
        vue_cities3: cityOptions3,
        vue_isIndeterminate3: false,

					//高级搜索表单
				 vue_form: {
			          keyname: '',
			          resource: '',
			          brand:[],
			          brandCode:'',
			          categorys:[],
			          categoryCode:'',
			        },
			        //修改
				vue_updateForm:{
					goodsUpperLimit:'',
					goodsLowerLimit:''
				},
					//table数据
				stockGoodsSet: {
					"list":[],  //数据列表
					"page":{},	//分页数据
					"sumInfo":{}, //汇总信息
				},
					/*--查询条件--*/
				stockGoodsQb:{
					"dataBillstate":"",  //客户状态
					"fullTextFilterStr":"",  //查询关键词
					options:[],
					ddlistKey:'',
					orderStr:'',//排序
				},


				/* end 全局变量定义 */
			}
		},
		watch:{
      "vue_updateForm.goodsUpperLimit":function(val,oldVal){
        this.upper_btn();
      },

		    "vue_updateForm.goodsLowerLimit":function(val,oldVal){
            this.lower_btn();
        },

    },
		methods: {
      upper_btn(){
        if(this.vue_updateForm.goodsUpperLimit<=this.vue_updateForm.goodsLowerLimit){
          this.tipsShow = true;
        }else{
          this.tipsShow = false;
        }
      },

      lower_btn(){
        if(this.vue_updateForm.goodsUpperLimit<=this.vue_updateForm.goodsLowerLimit){
          this.tipsShow = true;
        }else{
          this.tipsShow = false;
        }
      },

	    	vFun_sort(type){
	    		if(type.order==='ascending'){
	    			this.stockGoodsQb.orderStr=type.prop
	    		}else if(type.order==='descending'){
	    			this.stockGoodsQb.orderStr=type.prop +' desc'
	    		}else{
	    			this.stockGoodsQb.orderStr=''
	    		};
	    		this.queryByPage();
	    	},
			 handleCheckAllChange(event) {
		        this.vue_checkedCities = event.target.checked ? cityOptions : [];
		        this.vue_isIndeterminate = false;
		      },
		      handleCheckedCitiesChange(value) {
		        let checkedCount = value.length;
		        this.vue_checkAll = checkedCount === this.vue_cities.length;
		        this.vue_isIndeterminate = checkedCount > 0 && checkedCount < this.vue_cities.length;
		      },

		       handleCheckAllChange2(event) {
		        this.vue_checkedCities2 = event.target.checked ? cityOptions2 : [];
		        this.vue_isIndeterminate2 = false;
		      },
		      handleCheckedCitiesChange2(value) {
		        let checkedCount = value.length;
		        this.vue_checkAll2 = checkedCount === this.vue_cities2.length;
		        this.vue_isIndeterminate2 = checkedCount > 0 && checkedCount < this.vue_cities2.length;
		      },

		        handleCheckAllChange3(event) {
		        this.vue_checkedCities3 = event.target.checked ? cityOptions3 : [];
		        this.vue_isIndeterminate3 = false;
		      },
		      handleCheckedCitiesChange3(value) {
		        let checkedCount = value.length;
		        this.vue_checkAll3 = checkedCount === this.vue_cities3.length;
		        this.vue_isIndeterminate3 = checkedCount > 0 && checkedCount < this.vue_cities3.length;
		      },
			/* start 页面交互方法 */
				//选择row
			row_select(val) {
				this.vue_row_selectCount=val.length;
		        this.vue_row_goodsCodeStr = "";
		        val.forEach((item,index,arr)=>{
		        	this.vue_row_goodsCodeStr += item.goodsCode+","
		        });
				this.vue_row_goodsCodeStr = this.vue_row_goodsCodeStr.substring(0,this.vue_row_goodsCodeStr.length-1);
				if (this.vue_row_selectCount!=0) {
					this.vue_advSearch_showDialog=false
				}
			},
				//取消选择
			row_unselectAll(){
				this.vue_row_selectCount = 0;
		        this.vue_row_goodsCodeStr = "";
				this.$refs.stockGoodsRows.clearSelection();
			},
				//跳转编辑
			row_goUpdate(data){
				localStorage.setItem("goodsCode",data.goodsCode);
				this.$router.push({path:"/goods/stockGoodsListList"});
			},
				//修改
			row_Update(data){
				this.vue_goodsCod=data.goodsSkuCode,
				this.vue_update_enable=true;
				this.axios({
					method: 'Get',
					url: "/v3/stock/goodss/"+this.vue_goodsCod,
					data:{}
				}).then((res) => {
					this.vue_updateForm.goodsUpperLimit=res.data.goodsUpperLimit;
					this.vue_updateForm.goodsLowerLimit=res.data.goodsLowerLimit;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
				//确认修改
			update_ok(){
			   if(!this.tipsShow){
           this.vue_update_enable=false;
           this.axios({
             method: 'PUT',
             url: "/v3/stock/goodss/"+this.vue_goodsCod,
             data:{
               "goodsUpperLimit":this.vue_updateForm.goodsUpperLimit,
               "goodsLowerLimit":this.vue_updateForm.goodsLowerLimit,
             }
           }).then((res) => {
             this.Public.openSuccess(this,"操作成功！");
             this.queryByPage();
           }).catch((err)=>{
             this.Public.openError(this,err.response.data);
           });
         }

			},
				//取消修改
			update_cancel(){
				this.vue_update_enable=false;
			},
				//查看详情
			row_goDetail(data){
				localStorage.setItem("goodsCode",data.goodsCode);
				this.$router.push({path:"/stockGoodsDetail"});
			},
				//普通搜索 关键字
			generalSearch_ok(){
				this.stockGoodsSet.pageTools.pageNo=1;
				this.queryByPage();
			},
				//是否显示高级搜索窗口
			advSearch_showDialog(){
				this.vue_advSearch_enable=true;
				this.stockGoodsQb.old_fullTextFilterStr = this.stockGoodsQb.fullTextFilterStr;
				this.stockGoodsQb.old_dataBillstate = this.stockGoodsQb.dataBillstate;
			},
				//高级搜索窗口确定
			advSearch_ok() {
				this.vue_advSearch_enable = false;
				this.vue_advSearch_showDialog=true;
				this.vue_row_selectCount=8888;
				this.queryByPage();
			},
				//清除搜索
			advSearch_disable(){
				this.vue_form.resource='';
				this.vue_form.keyname='';
				this.vue_form.categoryCode='';
				this.vue_form.brandCode='';
				this.vue_form.goodsTagStr='';
				this.stockGoodsQb.fullTextFilterStr='';
				this.stockGoodsSet.pageTools.pageNo = 1;
				this.vue_advSearch_showDialog=false;
				this.vue_row_selectCount=0;
				this.queryByPage();
			},
				//继续搜索
			advSearch_enable(){
				this.vue_advSearch_enable=true;
				this.vue_advSearch_showDialog=false;
			},
				//高级搜索窗口取消
			advSearch_cancel() {
				this.vue_form.resource='';
				this.vue_form.keyname='';
				this.vue_form.categoryCode='';
				this.vue_form.brandCode='';
				this.vue_form.goodsTagStr='';
				this.vue_advSearch_enable=false;
				this.vue_advSearch_showDialog=false;
				this.vue_row_selectCount=0;
				this.stockGoodsQb.fullTextFilterStr = this.stockGoodsQb.old_fullTextFilterStr;
				this.stockGoodsQb.dataBillstate = this.stockGoodsQb.old_dataBillstate;
			},
				//查table数据
			queryByPage(){
				this.axios({
					method: 'post',
					url: "/v3/stock/goodss/list",
					data:{
						"offset":(this.stockGoodsSet.pageTools.pageNo-1)*this.stockGoodsSet.pageTools.pageSize,
						"limit":this.stockGoodsSet.pageTools.pageSize,
						"fullTextFilterStr":this.stockGoodsQb.fullTextFilterStr,
//						"dataBillstate": this.vue_form.resource,
						 "goodsInformation":this.vue_form.keyname,	//关键字
						 "categoryCode":this.vue_form.categoryCode,		//分类
						 "brandCode":this.vue_form.brandCode,	//品牌
						 "goodsTagStr":this.vue_form.goodsTagStr,	//商品标签
						 "stockDataBillstate": this.vue_form.stockDataBillstate,	//库存状态
						 "orderStr":this.stockGoodsQb.orderStr
					}
				}).then((res) => {
					this.stockGoodsSet.list = res.data.list;
          this.stockGoodsSet.list.forEach((item,index,arr) =>{
              if(item.goodsNum  <=  item.goodsLowerLimit ){
                this.regShow = true;
              }else{
                this.regShow = false;
              }
          });
					this.stockGoodsSet.pageTools = res.data.pageTools;
					this.stockGoodsSet.pageTools.pageSizeOptions = JSON.parse(this.stockGoodsSet.pageTools.pageSizeOptions);
					this.stockGoodsSet.sumInfo = res.data.sumInfo;
					this.vue_updateForm.goodsUpperLimit=res.data.goodsUpperLimit;
					this.vue_updateForm.goodsLowerLimit=res.data.goodsLowerLimit;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
				//pageSize每页条数变化时的fn
			page_onPageSizeChange(val) {
				this.stockGoodsSet.pageTools.pageSize = val;
				this.queryByPage();
			},
				//pageNo当前页码变化时的fn
			page_onCurPageChange(val) {
				this.stockGoodsSet.pageTools.pageNo = val;
				this.queryByPage();
			},
				//批量流转
			batchTransfer(){
				this.$confirm('请确认是否批量流转？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then(()=>{
			    	this.axios({
						method: 'patch',
						url: "/v3/stock/goodss/" + this.vue_row_goodsCodeStr + "/batchTransfer",
						data:{
						}
					}).then((res) => {
						this.vue_row_selectCount = 0;
				        this.vue_row_goodsCodeStr = "";
						this.Public.openSuccess(this,"操作成功！");
						this.queryByPage();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
				    });
			    }).catch(()=>{

			    });
			},
			/* add more row action function */
				//批量删除
			batchDelete() {
				this.$confirm('请确认是否批量删除？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
				}).then(() => {
					this.axios({
						method: 'delete',
						url: "/v3/stock/goodss/" + this.vue_row_goodsCodeStr,
						data: {
						}
					}).then((res) => {
						this.vue_row_selectCount = 0;
				        this.vue_row_goodsCodeStr = "";
						this.Public.openSuccess(this,"操作成功！");
						this.queryByPage();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
				    });
			    }).catch(()=>{
			    	//取消
			    });
			},
				//获取商品品牌
			query_goodsBrand(){
				this.axios({
					method: 'post',
					url: "/v3/goods/brands/list",
					data:{}
				}).then((res) => {
					this.vue_form.brand = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
			//获取商品分类
			query_goodsCategory(){
				this.axios({
					method: 'post',
					url: "/v3/goods/categorys/list",
					data:{}
				}).then((res) => {
					this.vue_form.categorys = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
			//获取商品标签
			query_ddtypeListAll(){
				this.axios({
					method: 'post',
					url: "/v3/basic/ddlists/00100000001/listAll",
					data:{}
				}).then((res) => {
					this.cityOptions2 = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
			/* end 页面交互方法 */
		},
		created(){
			this.stockGoodsSet.pageTools = this.$store.state.page;
			//请求客户列表
			this.queryByPage();
			this.query_goodsBrand();
			this.query_goodsCategory();
			this.query_ddtypeListAll();
		},
		mounted() {
			//动态设置高度
			this.$refs.content.style.height = (document.documentElement.clientHeight - 124)+"px";
			this.vue_tableHeight = document.documentElement.clientHeight - 240;
		},
	}
</script>

<style scoped>
  .redStyle{
    color: red;
    position: absolute;
    bottom: -20px;
    left: 80px;
  }

  .red{
    color: red!important;
  }
	/* start  面包屑 */
	.location {padding: 3px 0 15px 0;}
	/* end  面包屑 */
	/* start content */
	.content {position: relative;background: #fff;padding: 15px;overflow-y: auto;font-family: "微软雅黑";}
		/* start 高级搜索 */
	.modal_backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 80;background-color: rgba(240, 240, 240, 0.2);}
	.specific_search {position: absolute;width: 100%;top: 0;left: 0;padding: 30px;z-index: 1005;background: #fff;box-sizing: border-box;box-shadow: 0 0 10px #ccc;}
	.search_title {font-size: 16px;border: 0;color: #415161;}
	.form {margin: 20px 0;background: #fff;}
	.search_btn {margin-top: 20px;}
	.search_handle {margin-left: -6px;height: 36px;line-height: 36px;}
	.search_handle em {font-size: 14px;}
	.search_handle a {margin-right: 20px;cursor: pointer;color: #768696;}
	.search_handle a:hover {color: #03B8CC;}
	.search_handle {margin-left: 10px;}
		/* end 高级搜索 */
		/* start 批量操作 */
	.batch_handle {margin-left: -6px;height: 36px;line-height: 36px;}
	.batch_handle em {font-size: 14px;}
	.batch_handle a {margin-right: 20px;cursor: pointer;color: #768696;}
	.batch_handle a:hover {color: #03B8CC;}
		/* end 批量操作 */
		/* start 普通搜索 */
	.public_th {position: relative;min-width: 750px;z-index: 100;}
	.public_th_left span.search_openBtn {display: block;position: relative;height: 36px;margin-right: 10px;padding-right: 0px;line-height: 36px;color:#93a6b7;z-index: 100;cursor: pointer;}
	.slideBtn {line-height: 36px;margin-right: 26px;}
	.slideBtn>div>span{display: block;cursor: pointer;}
	.search_input input {display: block;float: left;width: 400px;height: 34px;font-size: 12px;border: 0;margin-left: 20px;}
	.search_input {float: left;width: 450px;border: 1px solid #cdd9e6;border-radius: 30px;margin-right: 10px;cursor: pointer;}
	.search_input:hover {border-color:#13C19F;transition: 1s;}
	.search_input i {background: url('../../../img/sousuo.png') no-repeat; height: 20px;width: 20px;display: inline-block;position: relative;top: 7px;right: 5px;cursor: pointer;}
	.public_th_right a {display: block;float: left;width: 80px;height: 32px;margin-left: 10px;box-sizing: border-box;text-decoration: none;text-align: center;line-height: 32px;border-radius: 30px;border: 1px solid #cdd9e6;cursor: pointer;}
		/* end 普通搜索 */
		/* start 表格 */
	.table {margin-top: 15px;}
	.table th {height: 50px;}
	.el-table th>.cell {width: 100%;word-wrap: normal;text-overflow: ellipsis;line-height: 20px;box-sizing: border-box;font-weight: normal !important;font-size: 14px;}
	.el-table {font-size: 12px !important;font-weight: normal !important;}
	.el-table--fit {border-left: 0;}
	.popover_p {text-indent: 10px;line-height: 30px;}
	.popover_p em {position: relative;top: 2px;margin-right: 3px;}
	.popover_p:hover {background: #eef1f9;color: #03B8CC;}
	.tab_hover {color: #b7c6d6;cursor: pointer;}
	.canClickText {cursor: pointer;color:#03B8CC;text-decoration:underline;}
		/* end 表格 */
		/* start page */
	.block {margin: 15px;}
		/* end page */
	/* end content */
	/* start transition */
	.fade-enter,.fade-leave-active {opacity: 0}
	.fade-enter-active,.fade-leave-active {transition: .4s;}
	/* end transition */
	.form{
		overflow: hidden;
	}
	.form-left{
		width: 500px;

	}
</style>
